<template>
  <view class="picker-container">
    <!-- 点击触发picker弹窗 -->
    <view class="picker-label" @tap="showPicker = true">
      <slot></slot>
    </view>

    <!-- 自定义picker弹窗 -->
    <view class="picker-popup" v-if="showPicker">
      <view class="picker-overlay" @tap="closePicker"></view>
      <view class="picker-content">
		   <!-- 自定义取消、确定按钮（可以国际化） -->
		 <!-- <view class="picker-footer">
		   
		    <view @tap="cancelPicker">{{ cancelText }}</view>
		    <view @tap="confirmPicker">{{ confirmText }}</view>
		  </view> -->
        <scroll-view scroll-y="true" class="picker-scroll">
          <!-- 根据不同列生成滚动列表 -->
          <view class="picker-column" v-for="(item, index) in range" :key="index">
            <view
              class="picker-item"
			  :class="{ 'active': value === range[index].value }"
              @tap="selectItem(index)"
            >
              {{ item.name }}
            </view>
          </view>
        </scroll-view>
        
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 传入选择的数据
    range: {
      type: Array,
      default: () => []
    },
    // 默认的选中值
    value: {
      type: String,
      default:''
    },
    // 国际化按钮文本
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  data() {
    return {
      showPicker: false,
      selectedIndexes: [...this.value]  // 存储用户选择的索引
    };
  },
  methods: {
    // 选择项目
    selectItem(index) {
     this.$emit('change', index); // 触发父组件的change事件
     this.showPicker = false;
    },
    // 点击确定按钮
    confirmPicker() {
      this.$emit('change', this.selectedIndexes); // 触发父组件的change事件
      this.showPicker = false;
    },
    // 点击取消按钮
    cancelPicker() {
      this.selectedIndexes = [...this.value]; // 还原初始值
      this.showPicker = false;
    },
    // 关闭弹窗
    closePicker() {
      this.cancelPicker();
    }
  }
};
</script>

<style>
.picker-container {
  position: relative;
}

/* .picker-label {
  padding: 10px;
  border: 1px solid #ccc;
} */

.picker-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 10;
}

.picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.picker-content {
  background: #fff;
  z-index: 9999;
  position: relative;
  padding-top: 30rpx;
}

.picker-scroll {
  height: 200px;
  display: flex;
  justify-content: space-between;
}

.picker-column {
  flex: 1;
  overflow-y: auto;
  text-align: center;
}

.picker-item {
  padding: 10px 0;
}

.picker-item.active {
  font-weight: bold;
  color: #2EC1B0;
}

.picker-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
  color: #b5b1b1;
}
</style>
